<template>
  <div class="h-full flex flex-col">
    <a-card>
      <div slot="title">
        <a-space>
          <div class="ty"></div>{{ $t('user.verification-code.required1115661105788') }}
        </a-space>
      </div>
      <!-- 搜索form -->
      <a-form layout="inline">
        <a-form-item>
          <a-button type="primary" icon="plus" @click="showModal()">{{ $t('user.verification-code.required1115661105789')
          }}</a-button>
        </a-form-item>
      </a-form>
      <a-tree :tree-data="treeData" default-expand-all defaultExpandParent show-line show-icon :selectable="false">
        <template #title="{ Id, SourceName, SourceSuperior, level, nodeStr, SourceNameEn }">
          <div class="flex flex-row  items-center py-2">
            <div class="truncate pr-2">
              <div class="inline-block min-w-[132px] h-[32px] leading-[32px] text-center"
                :style="{ 'background-color': `rgba(36, 89, 229,${level == 1 ? 1 : 1 - (level * 0.2)} `, color: level < 3 ? '#fff' : '#2459E5' }">
                {{  isLang ? SourceName : SourceNameEn   }}</div>
            </div>
            <div class="hidden action">
              <template slot="title">
                <span>{{ $t('user.verification-code.required11156611014') }}</span>
              </template>
              <div class="mx-1 w-[30px] h-[30px] flex justify-center items-center border-1 border-[#0050F7] bg-[#D5E5FF]"
                @click="edit({ Id, SourceName, SourceSuperior, SourceNameEn })">
                <a-icon type="form" class="text-[#0050F7]" />
              </div>
              <template slot="title">
                <span>{{ $t('user.verification-code.required111566110577114') }}</span>
              </template>
              <createEdit :father="father" @control="control" />
              <div v-if="level < 4"
                class="mx-1 w-[30px] h-[30px] flex justify-center items-center border-1 border-[#0050F7] bg-[#D5E5FF]"
                @click="create({ Id, SourceName, SourceSuperior, SourceNameEn, level })">
                <a-icon type="plus-circle" theme="twoTone" two-tone-color="#0050F7" />
              </div>
              <template slot="title">
                <span>{{ $t('app.setting.copy') }}</span>
              </template>
              <div class="mx-1 w-[30px] h-[30px] flex justify-center items-center border-1 border-[#0050F7] bg-[#D5E5FF]"
                @click="del(Id)">
                <a-icon type="minus-circle" theme="twoTone" two-tone-color="#D86969" />
              </div>
            </div>
          </div>
        </template>
      </a-tree>
      <!-- 抽屉组件  ref绑定save  succeed绑定初始化的 init事件  -->
      <createEdit ref="createEdit" @succeed="init" />
    </a-card>
  </div>
</template>
  
<script>
import { sourceTree } from '@/api/ytdg'
import CreateEdit from './components/createEdit'
import { listToTree } from '@/utils/util'
import { sourceCreate, sourceDelete } from '@/api/dcc'

export default {
  components: {
    CreateEdit
  },
  data() {
    return {
      bgMap: [1, 1, 0.6, 0.4, 0.2, 0.1],
      loading: false,
      treeData: [],
      mateData: [],
      isLang:true,
      level: '',
      visible: false,
      father: false,
    }
  },
  created() {
    this.init()
  },
  mounted(){
    let that=this;
    window.addEventListener('setItemEvent', function(e) {
      if(e.key=='lang'){
        let lang= JSON.parse(e.value)
        console.log(lang);
        if(lang == 'zh-EN'){
          that.isLang=false;
        }else{
          that.isLang=true
        
        }
      }
    })
  },
  methods: {
    control(val1) {
      this.father = val1
      this.init()
    },
    async init() {
      this.loading = true
      try {
        const { data } = await sourceTree({ types: 1 })
        // console.log('data---------', data);
        const listData = listToTree([...data], {
          id: 'Id',
          pid: 'SourceSuperior',
          branch: 'children',
          name: 'SourceName',
          nameEn: 'SourceNameEn'
        })
        this.treeData = listData
        console.log('treeData', listData);
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    //  新增一级分类
    showModal() {
      this.$refs.createEdit.open()
    },
    /**
     * 创建
     * @param {*} key
     */
    create(parentData) {
      // console.log('levl', parentData);
      this.level = parentData.level;

      this.$refs.createEdit.insert(parentData)
    },
    /**
     * 修改
     * @param {*}
     */
    edit(data) {
      this.$refs.createEdit.edit(data)
    },
    /**
     * 删除
     * @param {*} id
     */
    async del(id) {
      console.log(id);
      const _this = this
      this.$confirm({
        title: this.$t('user.verification-code.required111566110577224'),
        content: this.$t('user.verification-code.required111566110577225'),
        okText: this.$t('app.setting.weakmode'),
        okType: 'danger',
        cancelText: this.$t('user.email.required11'),
        async onOk() {
          try {
            await sourceDelete({ id })
            _this.$message.success(_this.$t('user.verification-code.required111566110577133'))
            _this.init()
          } catch (error) {
            _this.$message.error(error)
            console.log(error);
          }
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
:deep(.ant-tree li ul) {
  padding-left: 50px !important;
}

:deep(.ant-tree li .ant-tree-node-content-wrapper) {
  width: calc(100% - 14px);
  height: 50px;

  &:hover {
    background: none;

    .action {
      display: flex;
    }
  }
}

:deep(.ant-tree li span.ant-tree-switcher) {
  height: 40px;
  padding-top: 12px;
  padding-bottom: 8px;
}

:deep(.ant-tree.ant-tree-show-line li:not(:last-child)::before) {
  border-left: 1px solid #2459E5;
}

:deep(.ant-tree-switcher) {

  font-size: 20px;
}

:deep(.ant-tree-switcher-line-icon) {
  color: #2459E5;
}

:deep(.ant-tree.ant-tree-show-line li:not(:last-child)::before) {
  top: 18px;
}

// 关闭样式
:deep(.ant-tree-switcher_close) {
  background: url(~@/assets/icons/close.svg) no-repeat center !important;

  i {
    display: none;
  }
}

//打开样式
:deep(.ant-tree-switcher_open) {
  background: url(~@/assets/icons/open.svg) no-repeat center !important;

  i {
    display: none;
  }
}

:deep(.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop) {
  position: relative;
  // background: url(~@/assets/icons/open.svg) no-repeat center !important;

  &::before {
    content: ' ';
    background: #fff;
    position: absolute;
    height: 30px;
    width: 28px;
    top: 40px;
    left: 0;
  }

  i {
    display: none;
  }
}
</style>